<template>
  <el-table :data="tableData" stripe style="width: 100%" border size='mini' :height="height">
    <el-table-column prop="name" label="区域" width="250"></el-table-column>
    <el-table-column prop="remark" label="备注"></el-table-column>
    <el-table-column label="操作" width="180">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="editArea(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
        height: window.innerHeight - 163,//计算表格高度
        tableData: [],
        cityInfo:'',
    };
  },
  created(){
    this.$root.$on("urbanAreaList", row=>{
      this.cityInfo=row
      this.selectList(row)
    });
    this.$root.$on("saveArea", data=>{
      this.selectList()
    });
  },
  methods:{
    editArea(row){
      let cityInfo=this.cityInfo
      this.$root.$emit("addUrbanArea",row,cityInfo);
    },
    del(row) {
      let that=this
      request.delAlert({
          name:'删除该区域',
          that,
          fn(obj){
              that.$message(obj)
              let url='city/'+row.id+'?greenToken='+request.greenToken
              request.ajaxDel({
                url,
                that,
                fn(res){
                  // console.log(res)
                  that.$message(obj)
                  that.selectList();
                }
              })
          }
      })
    },
    selectList(){
      let obj=this.cityInfo
      let url = "city/all/city/"+obj.id;
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          that.tableData=res
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
</style>
